<script lang="ts" name="yeara">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from "echarts";
import type { TabsPaneContext } from "element-plus";

export default {
  setup() {
    const router = useRouter();

    onMounted(() => {
      // 图表
      type EChartsOption = echarts.EChartsOption;

      var chartDom = document.getElementById("yeara")!;
      var myChart = echarts.init(chartDom);
      window.onresize = function () {
        myChart.resize();
      };
      var option: EChartsOption;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          textStyle: {
            color: "rgba(242, 242, 242, 1)",
          },

          inactiveColor: "rgba(108, 108, 108, 1)",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "巡检总数",
            type: "bar",
            label: {
              show: true,
              position: "inside",
              color: "rgba(255, 255, 255, 1)",
              rotate: 90,
            },
            itemStyle: {
              color: "#6A68A6",
            },
            emphasis: {
              focus: "series",
            },
            data: [300, 350, 450, 400, 600, 500, 400,600,800,500,400,700],
          },
          {
            name: "已巡检",
            type: "bar",
            label: {
              show: true,
              position: "inside",
              color: "rgba(255, 255, 255, 1)",
              rotate: 90,
            },
            itemStyle: {
              color: "#BF4C41",
            },
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [250, 250, 300, 350, 500, 350, 300,300,400,400,300,500],
          },
          {
            name: "未巡检",
            type: "bar",
            label: {
              show: true,
              position: "inside",
              color: "rgba(255, 255, 255, 1)",
              rotate: 90,
            },
            itemStyle: {
              color: "#E8B30C",
            },
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [50, 100, 150, 50, 100, 150, 100,300,400,100,100,200],
          },
        ],
      };

      option && myChart.setOption(option);
    });

    return {
      // router
    };
  },
};
</script>

<template>
  <div id="yeara" style="height: 100%"></div>
</template>

<style scoped lang="scss"></style>
